<template>
	<view class="wrap">

		<u-navbar :placeholder="true" title="航班详情" @leftClick="goTab('/pages/flight/index')" />
		<view class="wrap_box">
			<view class="title">
				<span>{{FlightInfo.inFlightNo||FlightInfo.outFlightNo}}</span>
				<span>{{FlightInfo.inDate||FlightInfo.outDate}}</span>
			</view>
			<view class="card" style="margin-top: 10px;">
				<view class="itemList">
				
					<view v-if="FlightInfo.flightKind== '进港'" class="item border" v-for="(item,index) in flightMsg"
						:key="index">
						<view class="left1">
							{{item.label}}
						</view>
						<view class="right1">
							{{FlightInfo[item.prop] ||'-'}}
						</view>
					</view>
					<view v-if="FlightInfo.flightKind== '出港'" class="item border" v-for="(item,index) in flightMsg2"
						:key="index">
						<view class="left1">
							{{item.label}}
						</view>
						<view class="right1">
							{{FlightInfo[item.prop]||'-' }}
						</view>
					</view>

				</view>
			</view>
			<view class="formTitle">
				<view class="msg">
					<u-button type="primary" class="btn_left" size="small" @click="save">保存航班信息</u-button>
					<!-- @click="signature" -->
					<u-button type="primary" class="btn_right " size="small" @click='goSignDetail'>查看签字单据</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAction,
		postAction,
		httpAction,
		deleteAction
	} from "@/api/manage";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				flightMsg: [{
						label: '航线',
						prop: 'inFlightRoute'
					},
					{
						label: "航班日期",
						prop: "inDate"
					},
					{
						label: "航班号",
						prop: "inFlightNo"
					},
					{
						label: "航班属性",
						prop: "inFlightRouteType"
					},
					{
						label: "机型",
						prop: "planeType"
					},
					{
						label: "机号",
						prop: "planeNo"
					},
					{
						label: "机位",
						prop: "inStand"
					},
					{
						label: "计起",
						prop: "preTakeoffTime"
					},
					{
						label: "实起",
						prop: "preRealTime"
					},
					{
						label: "计落",
						prop: "inPlanTime"
					},
					{
						label: "预落",
						prop: "inExpectedTime"
					},
					{
						label: "实落",
						prop: "inRealTime"
					},
					{
						label: "航班状态",
						prop: "inFlightState"
					},

				],
				flightMsg2: [{
						label: '航线',
						prop: 'outFlightRoute'
					},
					{
						label: "航班日期",
						prop: "outDate"
					},
					{
						label: "航班号",
						prop: "outFlightNo"
					},
					{
						label: "航班属性",
						prop: "outFlightRouteType"
					},
					{
						label: "机型",
						prop: "outPlaneType"
					},
					{
						label: "机位",
						prop: "outStand"
					},
					{
						label: "机位变更",
						prop: "outStandChange"
					},
					{
						label: "计起",
						prop: "outPlanTime"
					},
					{
						label: "预起",
						prop: "outExpectedTime"
					},
					{
						label: "实起",
						prop: "outRealTime"
					},
					{
						label: "航班状态",
						prop: "outFlightState"
					},
				],
				urls: {
					saveflight: '/billFlight/flight', //put
					signlist: '/system/receipt/list',
				},
			}
		},
		onLoad: function() {},
		computed: {
			...mapGetters(["FlightInfo", ]),
		},
		methods: {
			async save() {
				let res = await httpAction(this.urls.saveflight, this.FlightInfo, 'put')
				this.$tab.reLaunch('/pages/flight/index')
			},
			// 前往签单详情
			async goSignDetail() {
				// 根据航班号查询签单信息，保存签单数据，前往签单数据
				let {
					data
				} = await getAction(this.urls.signlist, {
					flightId: this.FlightInfo.id
				});
				data.records.forEach(item => {
					item.billInfo = JSON.parse(item.billInfo);
					item.billInfo.tasks.forEach(val => {
						val.options.forEach(val2 => {
							if (val2.optionValue == true)
								val.value = val2.elementName;
						});
					});
				});
				this.$store.commit("GETBILLINFO", data.records[0]);
				this.$tab.navigateTo('/pages/signBill/billDetail')
			},

		},
	}
</script>

<style lang="scss" scoped>
	.itemList {
		.item {
			display: flex;
			justify-content: space-between;
			min-height: 30px;
			padding: 10px;
			align-items: center;
			background: #fff;

			// 航班信息
			.left1 {
				font: normal 400 14px 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				color: #5F5F5F;
				width: 30%;
			}

			.right1 {
				font: normal 550 14px 'PingFang-SC-Heavy';
				color: #5F5F5F;
				width: 50%;
				text-align: right;
			}

		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		background-image: url(/static/images/bg.png);
		background-size: 100% 100%;
		padding: 15px 20px;

		span {
			color: #144ea2;
			font: normal 700 16px 苹方-简 中黑体;
		}
	}


	.formTitle {
		padding: 5px 10px;
		margin-top: 15px;

		.msg {
			display: flex;
			margin-bottom: 15px;
			justify-content: space-between;

			span {
				color: #AEAEAE;
				font: normal 400 12px 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			}

			.btn_left {
				width: 55%;
				border-color: #5479fe;
				background: #5479fe;
				height: 60px;
				font-size: 18px;
				
			}

			.btn_right {
				width: 35%;
				height: 60px;
				font-size: 18px;
				border-color: #144ea2;
				background: #144ea2;
			}
		}


	}
</style>